<!--
 * @Description: 第二十七章（自定义指令directive）指令简写 鉴权
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-20 00:04:10
-->
<template>
  <div>
    <h1>第二十七章（自定义指令directive）指令简写 鉴权</h1>
    <div>
      <div class="btns">
        <el-button type="primary" v-has-show="'shop:create'">创建</el-button>
        <el-button type="warning" v-has-show="'shop:edit'">编辑</el-button>
        <el-button type="danger" v-has-show="'shop:delete'">删除</el-button>
        <el-button type="info" v-has-show="'shop:view'">查看</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { Directive, DirectiveBinding } from 'vue'

//permission

// 模拟本次缓存用户ID
localStorage.setItem('userId', 'ia')

// mock后台返回的数据
const permission = ['ia:shop:create', 'ia:shop:edit', 'ia:shop:delete']

const userId = localStorage.getItem('userId') as string

const vHasShow: Directive<HTMLElement, string> = (el, binding) => {
  console.log('el: ', el)
  console.log('binding: ', binding)

  if (!permission.includes(userId + ':' + binding.value)) {
    el.style.display = 'none'
  }
}
</script>
<style scoped lang="less">
h1,
h2,
h3,
hr {
  margin: 10px 0;
}

.btns {
}
</style>
